<template>
   <div id="webArticle">
        <div v-show="this.$route.name=='webArticleList'">
            <el-row>
                <el-col :span="3">
                    <el-button @click="createArticle" class="createButton" v-if="getButtonConfig&&getButtonConfig.create">新建文章</el-button>
                </el-col>
                <el-form>
                    <el-col :span="5">
                        <el-form-item label="类型" >
                             <el-select v-model="type" placeholder="请选择" style="width:12rem">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                         <el-form-item label="标题">
                            <el-input v-model="keyword" placeholder="请输入内容" style="width:15rem"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="发布时间"> 
                            <el-date-picker
                                v-model="datetime"
                                type="daterange"
                                placeholder="选择时间范围" 
                                @change="setDateTime"
                                style="width:16rem">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    </el-form>
                    <el-button @click="getArticleList" class="createButton" v-if="getButtonConfig&&getButtonConfig.query">查询</el-button>
                    <!-- </el-col> -->
            </el-row>
            <table-data :articleData="articleListData" @updateView="getArticleList" @changeCustom="setCustom" class="articleTable"></table-data>  
            <div class="page">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="curPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                :total="totalSize">
                </el-pagination>
            </div> 
        </div>
        <transition name="fade" mode="out-in">
            <router-view @updateList="getArticleList"></router-view>
        </transition>
   </div>
</template>
<script>
import {getArticleList, checkArticleDetail, reviseArticle, changeOnTop, deleteArticle} from 'api/webArticle';
import {jsUtils} from 'util/util.js';
import tableData from '../list/tableData.vue'
export default {
  components: {
    tableData: tableData
  },
  data () {
    return {
            //文章类型（写死）
      options: [{
        value: '',
        label: '全部'}, {
          value: 'FOCUS_VIEW',
          label: '焦点透视'
        }, {
            value: 'WEALTH_REPORT',
            label: '财富报告'
          }, {
              value: 'WEALTH_SCHOOL',
              label: '财富学堂'
            }, {
                    value: 'NEWS',
                    label: '华康新闻'
                  }],
      type: '',
      keyword: '',
      articleListData: [],
      orderBy: 'dateCreated',
      xsc: 'desc',
      currentPage4: 4,
      totalSize: 0,
      curPage: 1,
      pageSize: 10,
      dateStart: '',
      dateEnd: '',
      datetime: null
    }
  },
  created () {
    this.$emit('setTitleMsg', ['官网内容管理', '内容列表']);
    this.getArticleList();
  },
  computed: {
    getButtonConfig () {
      return this.$store.getters.getButtonConfig('webArticleList')
    }
  },
  methods: {
    setDateTime (val) {
      let startTime = val ? val.slice(0, 10) + ' 00:00:00' : '',
        endTime = val ? val.slice(13, val.length) + ' 23:59:59' : '';
      this.dateStart = startTime;
      this.dateEnd = endTime;
    },
        // 获取文章列表
    getArticleList () {
      let params = {
        keyword: this.keyword,
        orderBy: this.orderBy,
        xsc: this.xsc,
        type: this.type,
        dateStart: this.dateStart,
        dateEnd: this.dateEnd,
        curPage: this.curPage - 1,
        pageSize: this.pageSize
      }
      getArticleList(params)
            .then((response) => {
              let data = response.data;
              if (data.resultCode == '200') {
                this.articleListData = data.result;
                this.totalSize = data.size;
              }
            })
    },
    setCustom (fieldName, xsc) {
      this.orderBy = fieldName;
      this.xsc = xsc.slice(0, 3) == 'des' ? 'desc' : 'asc';
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.getArticleList();
    },
    handleCurrentChange (val) {
      this.curPage = val;
      this.getArticleList();
    },
    createArticle () {
      this.$router.push({name: 'addArticle'})
    }
  }
}
</script>
<style scoped lang="less">
   #webArticle{
       .createButton{
            width: 7.5rem;
            height: 2.4rem;
            background: #f7931e;
            color: white;
            font-size: 0.9em;
            border: 0;
       }
       .articleTable{
           margin-top:1rem;
       }
       .page{
           float: right;
           margin-top:1rem;
       }
   }
</style>

